<template>
  <div>
    <van-nav-bar left-arrow @click-left="goBack" :border=false :z-index=1000></van-nav-bar>
    <nav class="fdNav"></nav>
    <div class="fdBottom">
      <div class="fdbImg">
        <img
          src="https://cube.elemecdn.com/0/7e/dd35617b802500206cb9005d9dbd7jpeg.jpeg?x-oss-process=image/format,webp/resize,w_150"
          alt="">
      </div>
      <div class="fdbBottom">
        <h3>xxxx<span class="mintui mintuixialasanjiao"></span></h3>
        <p>xxxxxx</p>
      </div>
      <div class="fdbFooter">
        <div>
          <span class="border">20减10</span>
          <span class="border">30减12</span>
          <span class="text">3个优惠<span class="mintui mintuixialasanjiao"></span></span>
        </div>
        <p>公告，欢迎光临，用餐高峰期请提前下单，谢谢。</p>
      </div>
    </div>
    <van-tabs class="hg-tab">
      <van-tab title="点餐">
        <van-tree-select height="34.3rem" :items="items" :main-active-index.sync="activeIndex">
          <template slot="content" v-if="activeIndex === 0">
          <div class="tab-content-title">{{items[activeIndex].text}}</div>
          <div class="tab-content-content" v-for="(food,index) in foods[activeIndex].content" :key="index">
            <div class="tab-content-content-left"><img
              src="http://img001.hc360.cn/m4/M04/DC/27/wKhQ6FTS7JCEMS9xAAAAANiTKKY821.jpg" alt=""></div>
            <div style="clear: both;display: inline-block"></div>
            <div class="tab-content-content-right">
              <p class="tab-content-content-right-first">猪柳帕尼</p>
              <p class="tab-content-content-right-second">主要原料</p>
              <p class="tab-content-content-right-third">升级版猪柳帕尼尼</p>
              <div class="tab-content-content-right-fourth"><span>￥25</span><span class="mintui mintuijia1"></span>
              </div>
            </div>
            <div style="clear: both"></div>
          </div>
        </template>
          <template slot="content" v-if="activeIndex === 1">
            <div class="tab-content-title">{{items[activeIndex].text}}</div>
            <div class="tab-content-content" v-for="(food,index) in foods[activeIndex].content" :key="index">
              <div class="tab-content-content-left"><img
                src="http://img001.hc360.cn/m4/M04/DC/27/wKhQ6FTS7JCEMS9xAAAAANiTKKY821.jpg" alt=""></div>
              <div style="clear: both;display: inline-block"></div>
              <div class="tab-content-content-right">
                <p class="tab-content-content-right-first">猪柳帕尼</p>
                <p class="tab-content-content-right-second">主要原料</p>
                <p class="tab-content-content-right-third">升级版猪柳帕尼尼</p>
                <div class="tab-content-content-right-fourth"><span>￥25</span><span class="mintui mintuijia1"></span>
                </div>
              </div>
              <div style="clear: both"></div>
            </div>
          </template>
          <template slot="content" v-if="activeIndex === 2">
            <div class="tab-content-title">{{items[activeIndex].text}}</div>
            <div class="tab-content-content" v-for="(food,index) in foods[activeIndex].content" :key="index">
              <div class="tab-content-content-left"><img
                src="http://img001.hc360.cn/m4/M04/DC/27/wKhQ6FTS7JCEMS9xAAAAANiTKKY821.jpg" alt=""></div>
              <div style="clear: both;display: inline-block"></div>
              <div class="tab-content-content-right">
                <p class="tab-content-content-right-first">猪柳帕尼</p>
                <p class="tab-content-content-right-second">主要原料</p>
                <p class="tab-content-content-right-third">升级版猪柳帕尼尼</p>
                <div class="tab-content-content-right-fourth"><span>￥25</span><span class="mintui mintuijia1"></span>
                </div>
              </div>
              <div style="clear: both"></div>
            </div>
          </template>
          <template slot="content" v-if="activeIndex === 3">
            <div class="tab-content-title">{{items[activeIndex].text}}</div>
            <div class="tab-content-content" v-for="(food,index) in foods[activeIndex].content" :key="index">
              <div class="tab-content-content-left"><img
                src="http://img001.hc360.cn/m4/M04/DC/27/wKhQ6FTS7JCEMS9xAAAAANiTKKY821.jpg" alt=""></div>
              <div style="clear: both;display: inline-block"></div>
              <div class="tab-content-content-right">
                <p class="tab-content-content-right-first">猪柳帕尼</p>
                <p class="tab-content-content-right-second">主要原料</p>
                <p class="tab-content-content-right-third">升级版猪柳帕尼尼</p>
                <div class="tab-content-content-right-fourth"><span>￥25</span><span class="mintui mintuijia1"></span>
                </div>
              </div>
              <div style="clear: both"></div>
            </div>
          </template>
          <template slot="content" v-if="activeIndex === 4">
            <div class="tab-content-title">{{items[activeIndex].text}}</div>
            <div class="tab-content-content" v-for="(food,index) in foods[activeIndex].content" :key="index">
              <div class="tab-content-content-left"><img
                src="http://img001.hc360.cn/m4/M04/DC/27/wKhQ6FTS7JCEMS9xAAAAANiTKKY821.jpg" alt=""></div>
              <div style="clear: both;display: inline-block"></div>
              <div class="tab-content-content-right">
                <p class="tab-content-content-right-first">猪柳帕尼</p>
                <p class="tab-content-content-right-second">主要原料</p>
                <p class="tab-content-content-right-third">升级版猪柳帕尼尼</p>
                <div class="tab-content-content-right-fourth"><span>￥25</span><span class="mintui mintuijia1"></span>
                </div>
              </div>
              <div style="clear: both"></div>
            </div>
          </template>
        </van-tree-select>
      </van-tab>
      <van-tab title="评价">内容 2</van-tab>
      <van-tab title="商家">内容 3</van-tab>
    </van-tabs>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        activeIndex: 0,
        foods: [
          {id: 1, text: '黄焖类', content: [
              {
                id: 1,
                title: '黄焖鸡小份+米',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 2,
                title: '黄焖鸡+酥肉+米',
                main: '鸡腿',
                sell: '22',
                price: '16',
                url: 'http://pic72.nipic.com/file/20150710/4949133_112844127000_2.jpg'
              },
              {
                id: 3,
                title: '黄焖土豆鸡块+米',
                main: '鸡肉',
                sell: '28',
                price: '12',
                url: 'http://pic22.nipic.com/20120712/7810730_105128346121_2.jpg'
              },
              {
                id: 4,
                title: '黄焖鸡大份+米',
                main: '鸡肉',
                sell: '23',
                price: '21',
                url: 'http://img1.gtimg.com/baby/pics/hv1/70/165/1288/83794345.jpg'
              },
              {
                id: 5,
                title: '黄焖酥肉小份+米',
                main: '鸡肉',
                sell: '4',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 6,
                title: '黄焖干叶豆腐小份+米',
                main: '鸡肉',
                sell: '4',
                price: '11',
                url: 'http://b-ssl.duitang.com/uploads/item/201201/12/20120112210909_syzsN.thumb.700_0.jpg'
              },
              {
                id: 7,
                title: '黄焖土豆鸡块小份+米',
                main: '鸡肉',
                sell: '3',
                price: '15',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 8,
                title: '黄焖链家',
                main: '鸡肉',
                sell: '1',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 9,
                title: '黄焖酥肉大份',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 10,
                title: '黄焖鸡小份+米',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
            ]},
          {id: 2, text: '藤椒类', content: [
              {
                id: 1,
                title: '黄焖鸡小份+米',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 2,
                title: '黄焖鸡+酥肉+米',
                main: '鸡腿',
                sell: '22',
                price: '16',
                url: 'http://pic72.nipic.com/file/20150710/4949133_112844127000_2.jpg'
              },
              {
                id: 3,
                title: '黄焖土豆鸡块+米',
                main: '鸡肉',
                sell: '28',
                price: '12',
                url: 'http://pic22.nipic.com/20120712/7810730_105128346121_2.jpg'
              },
              {
                id: 4,
                title: '黄焖鸡大份+米',
                main: '鸡肉',
                sell: '23',
                price: '21',
                url: 'http://img1.gtimg.com/baby/pics/hv1/70/165/1288/83794345.jpg'
              },
              {
                id: 5,
                title: '黄焖酥肉小份+米',
                main: '鸡肉',
                sell: '4',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 6,
                title: '黄焖干叶豆腐小份+米',
                main: '鸡肉',
                sell: '4',
                price: '11',
                url: 'http://b-ssl.duitang.com/uploads/item/201201/12/20120112210909_syzsN.thumb.700_0.jpg'
              },
              {
                id: 7,
                title: '黄焖土豆鸡块小份+米',
                main: '鸡肉',
                sell: '3',
                price: '15',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 8,
                title: '黄焖链家',
                main: '鸡肉',
                sell: '1',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 9,
                title: '黄焖酥肉大份',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 10,
                title: '黄焖鸡小份+米',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
            ]},
          {id: 3, text: '泡椒类', content: [
              {
                id: 1,
                title: '黄焖鸡小份+米',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 2,
                title: '黄焖鸡+酥肉+米',
                main: '鸡腿',
                sell: '22',
                price: '16',
                url: 'http://pic72.nipic.com/file/20150710/4949133_112844127000_2.jpg'
              },
              {
                id: 3,
                title: '黄焖土豆鸡块+米',
                main: '鸡肉',
                sell: '28',
                price: '12',
                url: 'http://pic22.nipic.com/20120712/7810730_105128346121_2.jpg'
              },
              {
                id: 4,
                title: '黄焖鸡大份+米',
                main: '鸡肉',
                sell: '23',
                price: '21',
                url: 'http://img1.gtimg.com/baby/pics/hv1/70/165/1288/83794345.jpg'
              },
              {
                id: 5,
                title: '黄焖酥肉小份+米',
                main: '鸡肉',
                sell: '4',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 6,
                title: '黄焖干叶豆腐小份+米',
                main: '鸡肉',
                sell: '4',
                price: '11',
                url: 'http://b-ssl.duitang.com/uploads/item/201201/12/20120112210909_syzsN.thumb.700_0.jpg'
              },
              {
                id: 7,
                title: '黄焖土豆鸡块小份+米',
                main: '鸡肉',
                sell: '3',
                price: '15',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 8,
                title: '黄焖链家',
                main: '鸡肉',
                sell: '1',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 9,
                title: '黄焖酥肉大份',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 10,
                title: '黄焖鸡小份+米',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
            ]},
          {id: 4, text: '配料', content: [
              {
                id: 1,
                title: '黄焖鸡小份+米',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 2,
                title: '黄焖鸡+酥肉+米',
                main: '鸡腿',
                sell: '22',
                price: '16',
                url: 'http://pic72.nipic.com/file/20150710/4949133_112844127000_2.jpg'
              },
              {
                id: 3,
                title: '黄焖土豆鸡块+米',
                main: '鸡肉',
                sell: '28',
                price: '12',
                url: 'http://pic22.nipic.com/20120712/7810730_105128346121_2.jpg'
              },
              {
                id: 4,
                title: '黄焖鸡大份+米',
                main: '鸡肉',
                sell: '23',
                price: '21',
                url: 'http://img1.gtimg.com/baby/pics/hv1/70/165/1288/83794345.jpg'
              },
              {
                id: 5,
                title: '黄焖酥肉小份+米',
                main: '鸡肉',
                sell: '4',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 6,
                title: '黄焖干叶豆腐小份+米',
                main: '鸡肉',
                sell: '4',
                price: '11',
                url: 'http://b-ssl.duitang.com/uploads/item/201201/12/20120112210909_syzsN.thumb.700_0.jpg'
              },
              {
                id: 7,
                title: '黄焖土豆鸡块小份+米',
                main: '鸡肉',
                sell: '3',
                price: '15',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 8,
                title: '黄焖链家',
                main: '鸡肉',
                sell: '1',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 9,
                title: '黄焖酥肉大份',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 10,
                title: '黄焖鸡小份+米',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
            ]},
          {id: 5, text: '主食', content: [
              {
                id: 1,
                title: '黄焖鸡小份+米',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 2,
                title: '黄焖鸡+酥肉+米',
                main: '鸡腿',
                sell: '22',
                price: '16',
                url: 'http://pic72.nipic.com/file/20150710/4949133_112844127000_2.jpg'
              },
              {
                id: 3,
                title: '黄焖土豆鸡块+米',
                main: '鸡肉',
                sell: '28',
                price: '12',
                url: 'http://pic22.nipic.com/20120712/7810730_105128346121_2.jpg'
              },
              {
                id: 4,
                title: '黄焖鸡大份+米',
                main: '鸡肉',
                sell: '23',
                price: '21',
                url: 'http://img1.gtimg.com/baby/pics/hv1/70/165/1288/83794345.jpg'
              },
              {
                id: 5,
                title: '黄焖酥肉小份+米',
                main: '鸡肉',
                sell: '4',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 6,
                title: '黄焖干叶豆腐小份+米',
                main: '鸡肉',
                sell: '4',
                price: '11',
                url: 'http://b-ssl.duitang.com/uploads/item/201201/12/20120112210909_syzsN.thumb.700_0.jpg'
              },
              {
                id: 7,
                title: '黄焖土豆鸡块小份+米',
                main: '鸡肉',
                sell: '3',
                price: '15',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 8,
                title: '黄焖链家',
                main: '鸡肉',
                sell: '1',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 9,
                title: '黄焖酥肉大份',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
              {
                id: 10,
                title: '黄焖鸡小份+米',
                main: '鸡肉',
                sell: '69',
                price: '16',
                url: 'http://p2.img.cctvpic.com/photoworkspace/contentimg/2014/05/06/2014050615585856120.jpg'
              },
            ]},
        ],
        items: [{text: '黄焖类'}, {text: '藤椒类'}, {text: '泡椒类'}, {text: '配料'}, {text: '主食'},],
      }
    },
    created () {
      console.log(this.foods[1].id)
    },
    methods: {
      goBack () {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="less">
  *, *::before, *::after, p {
    padding: 0;
    margin: 0;
  }

  .van-nav-bar {
    position: fixed;
    height: 46px;
    line-height: 46px;
    text-align: center;
    background-color: rgba(119, 103, 137, 0);
    -webkit-user-select: none;
    user-select: none
  }

  .van-nav-bar__arrow {
    min-width: 1em;
    font-size: 1.3rem;
  }

  .van-nav-bar__left {
    left: 0.5rem;
    top: 0.2rem
  }

  .van-nav-bar .van-icon {
    color: #fff;
    vertical-align: middle
  }

  .fdNav {
    width: 100%;
    height: 5.3rem;
    background-color: rgba(119, 103, 137, .43);
  }

  .fdBottom {
    width: 100%;
    position: relative;
    color: #999;
    font-size: 0.6rem;

    .fdbImg {
      position: absolute;
      left: 50%;
      top: -3rem;
      margin-left: -2rem;

      img {
        display: block;
        width: 4rem;
        height: 4rem;
      }
    }

    .fdbBottom {
      width: 100%;
      padding: 2rem 0 0;
      text-align: center;
      color: #000;

      .mintuixialasanjiao {
        display: inline-block;
        transform: rotate(-90deg);
        padding-bottom: 0.3rem;
        font-size: 1.5rem;
      }
    }

    .fdbFooter {
      padding: 0.5rem 2rem 0;

      .border {
        color: rgb(255, 75, 51);
        border: 1px solid rgb(255, 201, 193)
      }

      .text {
        float: right;
      }
    }
  }

  .hg-tab .van-tab span {
    display: block;
    color: #666;
    font-size: 0.8rem;
    padding-top: 0.5rem;

    &:hover {
      color: #000;
    }
  }

  .van-tree-select__nav {
    -webkit-box-flex: 0.5;
    -webkit-flex: 0.5;
    flex: 0.5;
    overflow-y: auto;
    background-color: #fafafa;
    -webkit-overflow-scrolling: touch
  }

  .van-sidebar-item {
    display: block;
    box-sizing: border-box;
    padding: 20px 12px 20px 8px;
    overflow: hidden;
    color: #323233;
    font-size: 0.65rem;
    line-height: 1.4rem;
    word-wrap: break-word;
    /*background-color: #fafafa;*/
    border-left: 3px solid transparent;
    -webkit-user-select: none;
    user-select: none
  }

  .van-sidebar-item--select:active {
    background-color: #fff;
  }

  .tab-content-title {
    width: 100%;
    padding: 0.5rem 0 0.5rem 0.5rem;
    color: #666;
    font-size: 0.7rem;
    font-weight: bold;
  }

  .tab-content-content {
    width: 100%;
    padding-top: 0.7rem;

    .tab-content-content-left {
      display: inline-block;
      width: 38%;
      float: left;
      padding: 0 0.8rem;

      img {
        display: block;
        width: 5rem;
        height: 5rem;
      }
    }

    .tab-content-content-right {
      float: right;
      display: inline-block;
      width: 62%;

      .tab-content-content-right-first {
        font-size: 0.85rem;
        font-weight: bold;
      }

      .tab-content-content-right-second {
        font-size: 0.6rem;
        color: #999;
      }

      .tab-content-content-right-third {
        font-size: 0.6rem;
        color: #999;
      }

      .tab-content-content-right-fourth {
        padding-top: 1rem;
        font-size: 0.8rem;
        height: 1rem;
        color: #ff5339;
        position: relative;

        .mintuijia1 {
          display: inline-block;
          position: absolute;
          right: 1rem;
          top: 0.7rem;
          color: #2396ff;;
          font-size: 1.2rem;
        }
      }
    }
    &:last-child{
      padding-bottom: 3.1rem;
    }

  }
</style>
